<template>
	<view>
		<view v-if="inPorcessOrderId != null" class="order-process" @click="toOrder">您有进行中的订单,点击查看</view>

		<map id="map" :longitude="from.longitude" :latitude="from.latitude" :style="contentStyle" scale="15"
			:enable-traffic="false" :show-location="true" :enable-poi="true" class="map">
			<cover-image class="location" src="../../static/workbench/location.png"
				@tap="toLocationHandle()"></cover-image>
		</map>
		<view class="panel">
			<view class="from" @tap="chooseLocationHandle('from')">
				<text>{{ from.address }}</text>
			</view>
			<view class="dashed-line"></view>
			<view class="to" @tap="chooseLocationHandle('to')">
				<text>{{ to.address }}</text>
			</view>
			<button class="btn" @tap="toCreateOrderHandle">查看路线</button>
		</view>
	</view>
</template>

<script>
	import GtPush from '../../lib/gtpush-min.js'
	//地图点选插件
	const chooseLocation = requirePlugin('chooseLocation');
	let QQMapWX = require('../../lib/qqmap-wx-jssdk.min.js');
	let qqmapsdk;

	export default {
		data() {
			return {
				//开始位置
				from: {
					address: '输入你的开始位置',
					longitude: 0,
					latitude: 0
				},
				//结束位置
				to: {
					address: '输入你的目的地',
					longitude: 0,
					latitude: 0
				},

				//窗口样式
				contentStyle: '',
				windowHeight: 0,
				//地图对象
				mapContext: null,
				//标记:开始位置点选或者结束位置点选
				chooseFromOrToflag: null,
				inPorcessOrderId: null,
				chooseType: "",
			};
		},
		methods: {
			//初始化窗口样式
			initStyle() {
				let _this = this;
				//处理窗口样式
				let windowHeight = uni.getSystemInfoSync().windowHeight;
				_this.windowHeight = windowHeight - 200;
				_this.contentStyle = `height:${_this.windowHeight}px;`;
			},
			// 2.初始化腾讯地图对象
			initQQMap() {
				qqmapsdk = new QQMapWX({
					key: 'VJNBZ-XGTCN-OWNFW-SSLAR-PZ4PF-OBBIY' // 必填
				});
			},
			// 3.逆地址解析
			reverseGeocoder(location) {
				const _this = this;
				qqmapsdk.reverseGeocoder({
					location: location,
					success: (res) => {
						console.log(res);
						if (res.status == 0) {
							_this.from.address = res.result.formatted_addresses.standard_address;
						} else {
							uni.showToast({
								icon: "error",
								title: "获取地址失败!"
							})
						}
					}
				})
			},
			initMap() {
				let _this = this;
				_this.mapContext = uni.createMapContext("map", this);

				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						_this.from.longitude = res.longitude;
						_this.from.latitude = res.latitude;
						_this.reverseGeocoder(_this.from);
					}
				});
			},
			// 点击回答当前定位地址
			toLocationHandle() {
				const _this = this;
				_this.mapContext.moveToLocation();
			},

		},
		onShow: function() {
			const _this = this;
			// 初始化地图
			_this.initMap();
		},
		onHide: function() {},
		onLoad: function() {
			let _this = this;
			_this.initStyle();
			_this.initQQMap();


		},
		onUnload: function() {

		}
	};
</script>

<style lang="less">
	@import url('workbench.less');
</style>